import React, { useCallback, useEffect, useState } from 'react';
import { Alert, Button, Steps } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import RouterViwe from '../router/orderRoter'
import { useDispatch, useSelector } from 'react-redux';
import { asyncOrderAdd } from '../reducers/newOrderReducer';

export default function Order(props) {
  let newOrder = useSelector(store => store.neworder.newOrder)
  let productList = useSelector(store => store.neworder.productList)
  let dispatch = useDispatch()
  let [showAlert, setShowAlert] = useState(false)
  const [current, setCurrent] = useState(0);
  let name = useCallback(() => {
    switch (props.location.pathname) {
      case '/menu/order':
        return 'partainfo'
      case '/menu/order/parta':
        return 'partainfo'
      case '/menu/order/partb':
        return 'partbinfo'
      case '/menu/order/product':
        return 'productlist'
      default:
        return 'productlist'
    }
  }, [props.location.pathname])
  useEffect(() => {
    setCurrent(() => {
      switch (props.location.pathname) {
        case '/menu/order':
          return 0
        case '/menu/order/parta':
          return 0
        case '/menu/order/partb':
          return 1
        case '/menu/order/product':
          return 2
        default:
          return 2
      }
    })
    if (newOrder[name()]) {
      setShowAlert(false)
    }
  }, [props.location.pathname, newOrder, name])
  const onChange = (value) => {
    setShowAlert(false)
    const { push } = props.history
    switch (value) {
      case 0:
        push('/menu/order/parta')
        break;
      case 1:
        push('/menu/order/partb')
        break;
      default:
        push('/menu/order/product')
        break;
    }
  }
  const submit = () => {
    let time = Date.now();
    let orderlist = productList.info.map(item => { item.orderid = '2023-27-' + time; return item })
    dispatch(asyncOrderAdd(orderlist))
    props.history.push(`/print/${'2023-27-' + time}`)
  }
  const next = () => {
    if (newOrder[name()]) {
      onChange(current + 1)
      setShowAlert(false)
    }
    else {
      setShowAlert(true)
    }
  };
  let items =
    [
      {
        title: '选择甲方',
        keyword: 'partaname',
        icon: <EditOutlined />,
      },
      {
        title: '选择乙方',
        keyword: 'partbname',
        icon: <EditOutlined />,
      },
      {
        title: '选择产品',
        keyword: 'productlist',
        icon: <EditOutlined />,
      },
    ]
  const onClose = () => {
    setShowAlert(false)
  }

  return (
    <div>
      <Steps
        current={current}
        onChange={onChange}
        labelPlacement="vertical"
        items={items}
      />
      <RouterViwe></RouterViwe>
      <div style={{ textAlign: 'end', margin: '10px 0' }}>
        {
          current < items.length - 1 && (
            <Button type="primary" onClick={() => next()}>
              确认选择
            </Button>
          )
        }
        {
          current === items.length - 1 && (
            <Button type="primary" onClick={() => { submit() }} style={{ float: 'left' }}>
              提交订单
            </Button>
          )
        }
      </div>
      {showAlert && <Alert
        message={"请选择" + ((name() === 'partainfo') ? '甲方' : "乙方")}
        description={((name() === 'partainfo') ? '甲方' : "乙方") + "不能为空"}
        type="warning"
        showIcon
        closable
        onClose={onClose}
        style={{ width: '200px', float: 'right' }}
      />}
    </div >
  )
}
